<template>
	<view class="add bg_color pdd_bottom2">
		<view v-if="!isEnter">
			<view class="tit">
				<view class="text">纠纷信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef" :formList="formList" :formData="formData"></Form>
			<view class="tit">
				<view class="text">当事人信息</view>
				<view class="xing">*</view>
			</view>
			<view class="dangshiren">
				<view style="margin-bottom: 16rpx" v-for="(item, index) in dangShiRen" :key="item[0].label">
					<Form ref="formRefs" :formList="item" :formData="formData.contradictoryDisputesPartyList[index]">
						<template #delete>
							<view class="deleteDang" @click="() => deleteDang(index)" :style="{ height: '96rpx', lineHeight: '96rpx' }">
								<up-icon size="32rpx" :name="config.getImage('delete')"></up-icon>
								<view class="tex font28">删除</view>
							</view>
						</template>
					</Form>
				</view>
			</view>
			<view class="xinzen" @click="addDangShiRen">
				<up-icon size="32rpx" :name="config.getImage('add')"></up-icon>
				<view class="tex font28">新增当事人</view>
			</view>
			<view class="butt font28" @click="addItem">上报线索</view>
		</view>
		<SubmitState v-else :success="success == '添加成功' || '编辑成功'" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
	<up-toast ref="toast"></up-toast>
	<DeleteModal :deleteShow="deleteShow" @confirm="confirm" @close="deleteShow = false"></DeleteModal>
	<FuJinSubmitModal :deleteShow="deleteShow1" @confirm="confirm1" @close="deleteShow1 = false"></FuJinSubmitModal>
</template>
<script>
import changeData from 'utils/changeData.js'
export const formList1 = [
	{
		label: '标题',
		prop: 'title',
		type: 'text',
		placeholder: '请输入标题',
		rules: [
			{
				required: true,
				message: '请输入标题',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '纠纷类型',
		prop: 'disputeType',
		type: 'popup',
		placeholder: '请选择纠纷类型',
		rules: [
			{
				required: true,
				message: '请选择纠纷类型',
				trigger: ['change', 'blur']
			}
		],
		columns: [
			
		]
	},
	{
		label: '发生时间',
		prop: 'disputeTime',
		type: 'datetime',
		placeholder: '请选择时间',
		mode: 'datetime',
		rules: [
			{
				required: true,
				message: '请选择时间',
				trigger: ['change', 'blur']
			}
		],
		format: 'YYYY-MM-DD HH:mm'
	},
	{
		label: '所在地区',
		prop: 'province',
		type: 'picker',
		placeholder: '请选择所在地区',
		rules: [
			{
				required: true,
				message: '请选择所在地区',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		]
	},
	{
		label: '详细地址',
		prop: 'disputePlace',
		type: 'textarea',
		rules: [
			{
				required: true,
				message: '请输入地址',
				trigger: ['change', 'blur']
			},
		],
		placeholder: '请输入地址'
	},
	{
		label: '具体情况',
		prop: 'disputeContent',
		type: 'textarea',
		rules: [
			{
				required: true,
				message: '请输入内容',
				trigger: ['change', 'blur']
			},
		],
		placeholder: '请输入内容'
	}
];
export const dangShi = [
	{
		label: '姓名',
		prop: 'partyName',
		type: 'text',
		rules: [
			{
				required: true,
				message: '请输入姓名',
				trigger: ['change', 'blur']
			},
		]
	},
	{
		label: '电话号码',
		prop: 'partyPhone',
		type: 'text',
		rules: [
			{
				required: true,
				message: '请输入正确的电话号码',
				pattern: changeData.phonePattern,
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '身份证号码',
		prop: 'partyCard',
		type: 'text',
		rules: [
			{
				required: true,
				message: '请输入正确的身份证号码',
				validator: changeData.cardRouls,
				trigger: ['change', 'blur']
			}
		]
	}
];
</script>
<script setup>
import config from '@/config.js';
import Form from 'com/Form.vue';
import DeleteModal from 'com/modal/DeleteModal.vue';
import FuJinSubmitModal from 'com/modal/FuJinSubmitModal.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import Api from 'api';
import { usersStore } from 'store/users.js';
import changeData from 'utils/changeData.js';
import { dictStore } from 'store/dicts.js';
const api = new Api
const store = usersStore();
const store1 = dictStore();
const toast = ref();
const id = ref('');
const formRef = ref(null);
const formRefs = ref(null);
const dangShiRen = reactive([]);
const isEnter = ref(false);
const deleteShow = ref(false);
const deleteShow1 = ref(false);
const success = ref('');
const formList = ref([...formList1])
onLoad(async (query) => {
	const res = await store1.getDict('contradictory_disputes');
	formList.value[1].columns = res
	if (query.id) {
		uni.setNavigationBarTitle({
		      title: '编辑矛盾纠纷线索'
			 })
		id.value = query.id;
		const res = await api.queryById('contradictory',{ id: query.id });
		res.contradictoryDisputesPartyList.forEach((_item, index) => {
			index != 0 ? dangShiRen.push([...dangShi, { type: 'slot', prop: 'delete' }]) : dangShiRen.push([...dangShi]);
		});
		formData.value = res;
	}else{
		uni.setNavigationBarTitle({
		      title: '上报矛盾纠纷线索'
			 })
	}
	if (!dangShiRen.length) {
		formData.value.contradictoryDisputesPartyList.push({
			partyCard: '',
			partyPhone: store.isFuJing() ? '' : store.users.phone,
			partyName: store.isFuJing() ? '' : store.users.username
		});
		dangShiRen.push([...dangShi]);
	}
});
const formData = ref({
	title: '',
	disputeType: '',
	disputeTime: '',
	province: '',
	disputePlace: '',
	disputeContent: '',
	contradictoryDisputesPartyList: []
});
const fanhui = () => {
	uni.navigateBack()
};
const addDangShiRen = () => {
	dangShiRen.push([...dangShi, { type: 'slot', prop: 'delete' }]);
	formData.value.contradictoryDisputesPartyList.push({
		partyCard: '',
		partyPhone: '',
		partyName: ''
	});
};
const index = ref(-1);
const deleteDang = (inx) => {
	index.value = inx;
	deleteShow.value = true;
};
const confirm = () => {
	deleteShow.value = false;
	formData.value.contradictoryDisputesPartyList.splice(index.value, 1);
	dangShiRen.splice(index.value, 1);
};
const addItem = () => {
	let submitPromises = formRefs.value.map((item) => {
		return new Promise((resolve) => {
			item.submit(() => {
				resolve();
			});
		});
	});
	const from = new Promise((resolve) => {
		formRef.value.submit(() => {
			resolve();
		});
	});
	submitPromises.push(from);
	Promise.all(submitPromises).then(() => {
		const repeat = changeData.findDuplicateCardOrPhone(formData.value.contradictoryDisputesPartyList);
		if (repeat) {
			toast.value.show({ show: true, message: repeat.length > 11 ? '当事人身份证号码有重复' : '当事人电话号码有重复', type: 'error', position: 'top' });
			return;
		}
		store.isFuJing() ? (deleteShow1.value = true) : end();
	});
};
const confirm1 = () => {
	end();
};
const end = async () => {
	deleteShow1.value = false;
	let res;
	if (id.value) {
		formData.value.contradictoryDisputesPartyList.forEach((item) => {
			item.contradictoryId = formData.value.id;
		});
		res = await api.edit('contradictory',unref(formData));
	} else {
		res = await api.add('contradictory',unref(formData));
	}
	success.value = res;
	isEnter.value = true;
};
</script>
